<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- /fasttmp/mkdist-qt-4.3.5-1211793125/qtopia-core-opensource-src-4.3.5/doc/src/examples/tutorial.qdoc -->
<head>
  <title>Qt 4.3: Qt Tutorial 9 - With Cannon You Can</title>
  <link rel="prev" href="tutorial-t8.html" />
  <link rel="contents" href="tutorial.html" />
  <link rel="next" href="tutorial-t10.html" />
  <link href="classic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top" width="32"><a href="http://www.trolltech.com/products/qt"><img src="images/qt-logo.png" align="left" width="32" height="32" border="0" /></a></td>
<td width="1">&nbsp;&nbsp;</td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a>&nbsp;&middot; <a href="classes.html"><font color="#004faf">All&nbsp;Classes</font></a>&nbsp;&middot; <a href="mainclasses.html"><font color="#004faf">Main&nbsp;Classes</font></a>&nbsp;&middot; <a href="groups.html"><font color="#004faf">Grouped&nbsp;Classes</font></a>&nbsp;&middot; <a href="modules.html"><font color="#004faf">Modules</font></a>&nbsp;&middot; <a href="functions.html"><font color="#004faf">Functions</font></a></td>
<td align="right" valign="top" width="230"><a href="http://www.trolltech.com"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></a></td></tr></table><p>
[Previous: <a href="tutorial-t8.html">Chapter 8</a>]
[<a href="tutorial.html">Qt Tutorial</a>]
[Next: <a href="tutorial-t10.html">Chapter 10</a>]
</p>
<h1 align="center">Qt Tutorial 9 - With Cannon You Can<br /><small></small></h1>
<p>Files:</p>
<ul>
<li><a href="tutorial-t9-cannonfield-cpp.html">tutorial/t9/cannonfield.cpp</a></li>
<li><a href="tutorial-t9-cannonfield-h.html">tutorial/t9/cannonfield.h</a></li>
<li><a href="tutorial-t9-lcdrange-cpp.html">tutorial/t9/lcdrange.cpp</a></li>
<li><a href="tutorial-t9-lcdrange-h.html">tutorial/t9/lcdrange.h</a></li>
<li><a href="tutorial-t9-main-cpp.html">tutorial/t9/main.cpp</a></li>
</ul>
<p align="center"><img src="images/t9.png" alt="Screenshot of Chapter 9" /></p><p>In this example we become graphic by drawing a cute little blue cannon. Only <tt>cannonfield.cpp</tt> differs from the previous chapter.</p>
<a name="line-by-line-walkthrough"></a>
<h2>Line by Line Walkthrough</h2>
<a name="t9-cannonfield-cpp"></a>
<h3><a href="tutorial-t9-cannonfield-cpp.html">t9/cannonfield.cpp</a></h3>
<pre> void CannonField::paintEvent(QPaintEvent * <span class="comment">/* event */</span>)
 {
     QPainter painter(this);</pre>
<p>We'll now start to use <a href="qpainter.html">QPainter</a> in earnest. We create a painter that operates on this widget.</p>
<pre>     painter.setPen(Qt::NoPen);</pre>
<p>The edges of what <a href="qpainter.html">QPainter</a> draws are drawn using the pen. Here we set it to <a href="qt.html#PenStyle-enum">Qt::NoPen</a>, meaning that there will be no special edge when we draw something.</p>
<pre>     painter.setBrush(Qt::blue);</pre>
<p>When <a href="qpainter.html">QPainter</a> fills a rectangle, a circle, or whatever, it fills the shape using its brush. Here we set it to use a solid blue brush. (We could also use a pattern.) The blue brush will go all the way to the edges of the things we draw.</p>
<pre>     painter.translate(0, rect().height());</pre>
<p>The <a href="qpainter.html#translate">QPainter::translate</a>() function translates the coordinate system of the <a href="qpainter.html">QPainter</a> (i.e&#x2e;, it moves it by an offset). Here we set the (0, 0) point to the bottom-left corner of the widget. The <i>x</i> and <i>y</i> directions remain unchanged, i.e&#x2e;, all the <i>y</i> coordinates inside the widget are now negative. (See <a href="coordsys.html">The Coordinate System</a> for more information about Qt's coordinate system.)</p>
<pre>     painter.drawPie(QRect(-35, -35, 70, 70), 0, 90 * 16);</pre>
<p>The <a href="qpainter.html#drawPie">QPainter::drawPie</a>() function draws a pie shape inside the specified rectangle using a start angle and an arc length. The angles are specified in sixteenths of a degree. Zero degrees is at the 3 o'clock position. The drawing direction is counter-clockwise. Here we draw a quarter of a circle in the bottom-left corner of the widget. The pie is filled with blue and has no outline.</p>
<pre>     painter.rotate(-currentAngle);</pre>
<p>The <a href="qpainter.html#rotate">QPainter::rotate</a>() function rotates the coordinate system of the <a href="qpainter.html">QPainter</a> around the origin. The rotation argument is a <tt>float</tt> given in degrees (not given in sixteenths of a degree as above) and clockwise. Here we rotate the coordinate system <tt>currentAngle</tt> degrees counter-clockwise.</p>
<pre>     painter.drawRect(QRect(30, -5, 20, 10));</pre>
<p>The <a href="qpainter.html#drawRect">QPainter::drawRect</a>() function draws the specified rectangle. Here we draw the barrel of the cannon.</p>
<p>It can often be difficult to envision the resulting drawing when the coordinate system has been transformed (translated, rotated, scaled, or sheared) as above.</p>
<p>In this case the coordinate system is first translated and then rotated. If the rectangle <a href="qrect.html">QRect</a>(30, -5, 20, 10) had been drawn in the translated coordinate system, it would have looked like this:</p>
<p align="center"><img src="images/t9_1.png" alt="The cannon translated but not rotated" /></p><p>Note that the rectangle is clipped by the border of the <tt>CannonField</tt> widget. When we rotate the coordinate system, for instance 60 degrees, the rectangle will be rotated around (0, 0), which is the bottom-left corner because we have translated the coordinate system. The result looks like this:</p>
<p align="center"><img src="images/t9_2.png" alt="The cannon translated and rotated" /></p><a name="running-the-application"></a>
<h2>Running the Application</h2>
<p>When the slider is operated the angle of the drawn cannon changes accordingly.</p>
<p>The 'Q' on the <b>Quit</b> button is now underlined, and <b>Alt+Q</b> presses the button.</p>
<a name="exercises"></a>
<h2>Exercises</h2>
<p>Set a different pen instead of <a href="qt.html#PenStyle-enum">Qt::NoPen</a>. Set a patterned brush.</p>
<p>Try &quot;Q&amp;uit&quot; or &quot;Qu&amp;it&quot; as button text instead of &quot;&amp;Quit&quot;. What happens?</p>
<p>
[Previous: <a href="tutorial-t8.html">Chapter 8</a>]
[<a href="tutorial.html">Qt Tutorial</a>]
[Next: <a href="tutorial-t10.html">Chapter 10</a>]
</p>
<p /><address><hr /><div align="center">
<table width="100%" cellspacing="0" border="0"><tr class="address">
<td width="30%">Copyright &copy; 2008 <a href="trolltech.html">Trolltech</a></td>
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
<td width="30%" align="right"><div align="right">Qt 4.3.5</div></td>
</tr></table></div></address></body>
</html>
